<template>
  <div style="position: relative">
    <div ref="echartDom" v-bind="$attrs"></div>
    <div class="check-time-year-or-month" :style="{...magnifyFontSizeObj}">
      <el-button :class="lineBarData?.xAxisTimeType === 'year' ? 'active-btn' : ''" @click.stop="changeXAxisTimeTypeFunc('year')">按年</el-button>
      <el-button :class="lineBarData?.xAxisTimeType === 'month' ? 'active-btn' : ''" @click.stop="changeXAxisTimeTypeFunc('month')">按月</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, defineEmits} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  lineBarData: {
    type: Object,
    default: () => {
    }
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const emit = defineEmits(['checkTimeYearOrMonth', 'dialogEmit'])

const magnifyFontSizeObj = ref({
  '--custom-font-size-0-or-minus-5': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? -5 : 0) + 'px',
  '--custom-font-size-10': pxToRem(props?.dialogData?.fontSizeTimes * 10) + 'px',
  '--custom-font-size-20': pxToRem(props?.dialogData?.fontSizeTimes * 20) + 'px',
  '--custom-font-size-20-30': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 20 : 60) + 'px',
})

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let tempSeriesData = [
      {
        data: props?.lineBarData?.barData,
        type: 'bar',
        stack: '住宅地价',
        name: '住宅地价',
        barGap: '100%',
        yAxisIndex: 0,
      },
      {
        data: props?.lineBarData?.lineData[0],
        type: 'line',
        stack: '同比增长率',
        name: '同比增长率',
        showSymbol: false,
        smooth: true,
        yAxisIndex: 1,
      }
    ]
    if (props?.lineBarData?.legendData?.length === 3) {
      tempSeriesData.push({
        data: props?.lineBarData?.lineData[1],
        type: 'line',
        stack: '环比增长率',
        name: '环比增长率',
        showSymbol: false,
        smooth: true,
        yAxisIndex: 1,
      })
    }
    let option = {
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      legend: {
        icon: 'rect',
        x: 'center',
        y: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 20 : 0),
        itemWidth: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        itemHeight: pxToRem(10 * props?.dialogData?.fontSizeTimes),
        textStyle: {
          color: 'white',
          fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes)
        },
        color: ['#1d639c', '#7f7ffd', '#ea7f8c'],
        data: props?.lineBarData?.legendData
      },
      grid: {
        left: 0,
        right: `${props?.dialogData?.fontSizeTimes === 1 ? 4 : 8}%`,
        bottom: `${props?.dialogData?.fontSizeTimes === 1 ? 5 : 0}%`,
        top:  `${props?.dialogData?.fontSizeTimes === 1 ? 25 : 10}%`,
        containLabel: true
      },
      dataZoom: { // 数据过多内部拖动逻辑
        type: "slider",
        startValue: 0,
        endValue: 10,
        height: pxToRem(20),
        bottom: pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 15 : 10)
      },
      xAxis: {
        type: 'category',
        data: props?.lineBarData?.xAxisData,
        boundaryGap: false,
        axisLabel: {
          fontSize: pxToRem(9 * props?.dialogData?.fontSizeTimes),
          color: 'white',
          fontWeight: 'lighter',
        },
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false, // 不显示坐标轴线
        },
        splitLine: {
          show: false // 不显示网格线
        },
      },
      yAxis: [
        {
          name: '金额(亿元)',
          min: 0,
          max: (value) => value.max || 10000,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, 0]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white'
          }
        },
        {
          name: '增长率(%)',
          min: 0,
          max: (value) => value.max || 100,
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(0)]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            color: 'white',
            formatter: (val) => {
              return `${val}%`
            }
          },
          offset: pxToRem(5 * props?.dialogData?.fontSizeTimes)
        }
      ],
      series: tempSeriesData
    }
    option && myChart.value.setOption(option, true);

    myChart.value.on('legendselectChanged', (params) =>{
      event.stopPropagation();
    })
  }
}

const changeFontSize = () => { // 动态改变字体大小方法
  magnifyFontSizeObj.value = {
    '--custom-font-size-0-or-minus-5': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? -5 : 0) + 'px',
    '--custom-font-size-10': pxToRem(props?.dialogData?.fontSizeTimes * 10) + 'px',
    '--custom-font-size-20': pxToRem(props?.dialogData?.fontSizeTimes * 20) + 'px',
    '--custom-font-size-20-30': pxToRem(props?.dialogData?.fontSizeTimes === 1 ? 20 : 60) + 'px',
  }
}

const changeXAxisTimeTypeFunc = (val) => {
  emit('changeXAxisTimeType', val)
  emit('dialogEmit', {type: props?.lineBarData?.moduleName, value: val})
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  changeFontSize();
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h218 {
  height: 218px;
}
.dialog-h218 {
  width: 1120px;
  height: 500px;
}

.check-time-year-or-month {
  position: absolute;
  right: var(--custom-font-size-0-or-minus-5);
  bottom: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .el-button {
    width: var(--custom-font-size-20-30);
    height: var(--custom-font-size-20);
    margin: 0;
    font-size: var(--custom-font-size-10);
    box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
    border-radius: 0.04167rem;
    cursor: pointer;
    color: white;
    background-color: transparent;
    border: 0;
  }
  .el-button:last-child {
    margin-top: 5px;
  }
  .el-button.active-btn {
    background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
  }
}
</style>